<template>
  <div class="produ item-over sha1" @mouseenter="mouseenter2Show" @mouseleave="mouseleave2Hide">
    <div class="produ-preshow">
      <div class="pre-pic">
        <div class="pre-pic-bg">
          <img class="blur" :src="item.thumb" alt="">
        </div>
        <div class="pre-pic-shadow"></div>
        <div class="pre-pic-img">
          <img :src="item.thumb" alt="">
        </div>
        <div v-show="bIsOver" class="pre-pic-btn item-show">
          <el-row style="display: block; margin-top: 40%; text-align: center;">
            <el-button class="pre-pic-btn-cls" @click.stop="onPreview">预览</el-button>
            <el-button class="pre-pic-btn-cls" @click.stop="onEnterEdit">编辑</el-button>
          </el-row>
        </div>
        <div v-if="bIsQr" class="pre-pic-qr item-show">
          <img
            :data-src="item.qr_code"
            src="https://static.hd.xxx.com/upload/biz/1/411660.gif"
            alt=""
            @load.once="handleImgLoad($event)" />
        </div>
      </div>
    </div>

    <div class="produ-handle" :class="bIsHandleShow?'produ-handle-active':''">
      <div class="produ-handle-title">
        <p class="txt_ellipsis" :title="item.name">({{item.site_id}}) {{item.name}}</p>
      </div>
      <div class="produ-handle-type">
        <p>
          <span>{{item.type}}</span>
          <b>{{item.update_time}}</b>
        </p>
      </div>
      <div v-show="bIsOver" class="produ-handle-btn">
        <div class="handle-btn-qr" :class="bIsQr?'handle-btn-qr-active':''"
          @mouseenter="bIsQr=!bIsQr"
          @mouseleave="bIsQr=!bIsQr">
          <el-icon><View/></el-icon>
        </div>

        <div class="handle-btn-others" :class="bIsOthers?'handle-btn-others-active':''"
          @mouseenter="bIsOthers=!bIsOthers"
          @mouseleave="bIsOthers=!bIsOthers">
          <el-row>
            <el-button size="small" class="btn-oth">操作</el-button>
          </el-row>

          <div v-show="bIsOthers" class="btn-others-box item-show sha0">
            <el-col type="flex" align="top" style="padding: 0; min-width: 60px;">
              <el-button v-if="bIsDetailDataBtnShow" type="text" class="btn-others" @click.stop="click2DetailData(item)"><i class="jy-icon-statistics"></i>数据</el-button>
              <el-button v-if="bIsOnlineBtnShow && item.status==2" :disabled="!item.status" type="text" class="btn-others" @click.stop="click2Online('1')"><i class="jy-icon-post"></i>上线</el-button>
              <el-button v-if="bIsOnlineBtnShow && item.status==1" :disabled="!item.status"  type="text" class="btn-others" @click.stop="click2Online('2')"><i class="jy-icon-offline"></i>下线</el-button>
              <el-button v-if="bIsDeleteBtnShow" type="text" class="btn-others btn-line" @click.stop="click2Delete"><i class="jy-icon-delete"></i>删除</el-button>
              <el-button v-if="bIsCopySiteBtnShow" type="text" class="btn-others" @click.stop="click2CopySite"><i class="jy-icon-copy"></i>拷贝站点</el-button>
              <el-button v-if="bIsTurnTempBtnShow && item.h5Type != H5_TYPE.card" type="text" class="btn-others btn-line" @click.stop="click2Turn"><i class="jy-icon-template"></i>转作模版</el-button>
              <el-button v-if="bIsTurnSiteBtnShow" type="text" class="btn-others" @click.stop="click2Turn"><i class="jy-icon-copy"></i>创建站点</el-button>
            </el-col>

            <div class="inverted-tri sha3"></div>
          </div>
        </div>
      </div>

      <!-- v-if="bIsTagShow" -->
      <div class="produ-tag" >
        <!-- :isBtnShow="produType == 'ADMINPRODU'" -->
        <ProduTags
          :item="item"
          :isBtnShow="(produType == 'ADMINPRODU') || (produType == 'ADMINTEMP' && group == 1)">
        </ProduTags>
      </div>
    </div>

    <div class="produ-status" :class="{'is-online':item.status==1}">
      <p>{{item.status==1?"已发布":"未发布"}}</p>
    </div>
  </div>
</template>

<script>
  import ProduTags from '@/views/child/admin/common/tag/ProduTags.vue'
  import { H5_TYPE } from '@/common/const-dif'
  import { mapActions, mapState } from 'vuex'
  import { EventBus } from '@/store/index'
  import { reactive } from 'vue'

  export default {
    setup () {
      const state =  reactive({
        bIsOver: false,
        bIsHandleShow: false,
        bIsQr: false,
        bIsOthers: false,
      })
      const state_ = {
        H5_TYPE: H5_TYPE,
        overTimer: null,
      }
      _.merge(state, state_)
      return state
    },
    props: {
      item: Object,
      produType: String,  // ADMINPRODU/ADMINTEMP
    },
    computed: {
      ...mapState({
        group: (state) => state.user.user.group,
      }),

      /* 操作按钮 */
      bIsDetailDataBtnShow() {  // 数据
        if(this.produType == 'ADMINPRODU') return true;
        return false;
      },
      bIsOnlineBtnShow() {  // 上/下线
        if(this.produType == 'ADMINPRODU') return true;
        if(this.produType == 'ADMINTEMP') return this.group == 1;
        return false;
      },
      bIsDeleteBtnShow() {  // 删除
        if(this.produType == 'ADMINPRODU') return true;
        if(this.produType == 'ADMINTEMP') return this.group == 1;
        return false;
      },
      bIsCopySiteBtnShow() {  // 拷贝站点
        if(this.produType == 'ADMINPRODU') return true;
        return false;
      },
      bIsTurnTempBtnShow() {  // 转作模版
        if(this.produType == 'ADMINPRODU') return this.group == 1;
        return false;
      },
      bIsTurnSiteBtnShow() {  // 创建站点
        if(this.produType == 'ADMINTEMP') return true;
        return false;
      },
    },
    components: {
      ProduTags,
    },
    methods: {
      ...mapActions({
        onlineTemp: "user/onlineTemp",
        onlineSite: "user/onlineSite",
        setSitePreview: 'user/setSitePreview',
        createCopySite4H5: "components/createCopySite",
        createCopySite4Card: "cardComponents/createCopySite",
        handleTurnTemp: 'user/handleTurnTemp',
        handleTurnSite: "user/handleTurnSite",
        getCardSite: 'cardComponents/getCardSite',
        getCardSitePreshow: 'cardComponents/getCardSitePreshow',
        updateMgSitePreview: 'cardComponents/updateMgSitePreview',
        handleDeleteTemp: "user/handleDeleteTemp",
      }),
      async onPreview(){
        // 1. card
        if(this.item.h5Type == 4) {
          await this.getCardSite({ id: this.item.site_id });
          await this.getCardSitePreshow({ id: this.item.site_id });
          this.updateMgSitePreview({ isActive: true });
        }
        // 2. 非 card: h5 canvas pc
        else {
          this.setSitePreview({isEditSite: false})
          this.$store.dispatch("user/getSiteData", { item: this.item, isTempPreviewUrl: true });
        }
      },
      onEnterEdit(){
        // this.$store.dispatch("components/getPageDatas", {id: this.item.site_id, $router: this.$router});
        if(this.item.h5Type == 4) this.$router.push({ name: 'cardedit', params: { id: this.item.site_id }});
        else this.$router.push({ path: `/h5edit/${this.item.site_id}`});
      },
      mouseenter2Show() {
        let that = this;
        that.bIsHandleShow = true;
        if(that.overTimer) clearTimeout(that.overTimer);
        that.overTimer = setTimeout(function() {
          that.bIsOver = true;
          if(that.overTimer) clearTimeout(that.overTimer);
        }, 300);
      },
      mouseleave2Hide() {
        let that = this;
        // console.log("produ-leave: ", el);

        if(that.overTimer) clearTimeout(that.overTimer);
        this.bIsOver = false;
        this.bIsHandleShow = false;
        this.bIsQr = false;
        this.bIsOthers = false;
      },
      click2DetailData(item) {
        // this.$router.push('/admin/data')
        EventBus.$emit("changeAdminTab", { type: 'ADMINDATA',  site_id: item.site_id})
      },
      click2Online(onlineType) {
        let params = {
          online: onlineType,  // online 2-下线，1-上线
          site_id: this.item.site_id,
        };
        if(this.produType == 'ADMINPRODU') this.onlineSite(params);
        if(this.produType == 'ADMINTEMP') this.onlineTemp(params);
      },
      click2Delete() {
        if(this.produType == 'ADMINPRODU') this.$store.commit("updateDeleteSiteData", { isDelete: true, site_id: this.item.site_id });
        if(this.produType == 'ADMINTEMP') this.handleDeleteTemp({ site_id: this.item.site_id });
      },
      click2CopySite(){
        this.$store.dispatch("user/getSiteData", { item: this.item, callback: (data) => {
          let type = data.attrs.h5Type;
          if(type == H5_TYPE.card) this.createCopySite4Card({type, $router: this.$router, data});
          else this.createCopySite4H5({type, $router: this.$router, data});
        }, isTempPreviewUrl: true});
      },
      click2Turn() {
        // 需要管理员权限
        // 复制站点为模版
        if(this.produType == 'ADMINPRODU') this.handleTurnTemp({ site_id: this.item.site_id });
        if(this.produType == 'ADMINTEMP') this.handleTurnSite({ site_id: this.item.site_id });
      },
      handleImgLoad(e) {
        const targetImg = e.target;
        const dataSrc = e.target.getAttribute('data-src');
        const image = new Image();
        image.src = dataSrc;
        image.onload = function() {
          targetImg.src = dataSrc;
        };
        image.onerror = function() {
          targetImg.src = '//static.hd.xxx.com/upload/biz/1/596882.png';
        };
      },
    },
    beforeUnmount() {
      // overTimer
      if(this.overTimer) clearTimeout(this.overTimer);
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/common.scss';

  /**************produ***************/
  .produ{
    position: relative;
    width: 242px;
    height: 320px;

    background: #fff;
  }

  .produ-preshow{
    position: relative;
    height: 238px;

    background: #aaa;
    z-index: 1;

    .pre-pic-bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;

      img{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .pre-pic-shadow{
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0);
    }

    .pre-pic-img{
      position: relative;
      margin: 0 auto;
      padding-top: 6px;
      width: 140px;
      height: 226px;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .pre-pic-btn{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // display: flex;
      // justify-content: center;
      background: rgba(0, 0, 0, .5);

      .pre-pic-btn-cls{
        min-height: initial;
        padding: 6px 24px;
        // margin: 110px 10px 110px 10px;
        background: transparent;
        color: #fff;
        border-color: #fff;

        &:hover {
          background: #fff;
          color: #409eff;
          border-color: #409eff;
        }
        &:active {
          background: #fff;
          color: #3a8ee6;
          border-color: #3a8ee6;
        }
      }
    }

    .pre-pic-qr{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background: #fff;

      img{
        position: relative;
        display: block;
        margin: 30px auto 0 auto;
        width: 120px;
        height: 120px;
        object-fit: cover;
      }
    }
  }

  .produ-handle{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 82px;

    background: #fff;
    z-index: 2;
    transition: height .3s ease-in-out;
    // overflow: hidden;

    .produ-handle-title{
      position: relative;
      display: flex;
      align-items: center;
      height: 45px;

      p{
        flex: 1;
        padding: 2px 0;
        margin: 0 12px;
        border-bottom: 1px solid #EDEFF2;
        color: #43475C;
        font-size: 13px;
        word-break: break-all;
        -webkit-line-clamp: 2;
      }
    }

    .produ-handle-type{
      position: relative;

      p{
        margin: 0 10px;
        height: 37px;
        line-height: 37px;

        color: #127BFF;
        font-size: 12px;

        span{
          float: left;
        }

        b{
          float: right;
          font-weight: normal;
          color: #A5AFBE;
        }
      }
    }

    .produ-handle-btn{
      position: relative;
      margin: 10px 12px 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:hover {
        z-index: 1;
      }

      .handle-btn-qr{
        padding: 3px 20px 3px 3px;

        i{
          display: block;
          font-size: 18px;
          color: #43475C;
        }
      }
      .handle-btn-qr-active{
        i{
          color: #127BFF;
        }
      }

      .handle-btn-others{
        position: relative;
        padding: 8px;

        .btn-oth{
          padding: 4px 20px;;
          font-size: 14px;
          border: 1px solid #43475C;
          border-radius: 2px;
          color: #43475C;
        }

        .btn-others-box{
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          padding: 0 10px;

          background: #fff;

          .btn-others{
            display: block;
            width: 100%;
            padding: 8px 0;
            margin: 0;
            text-align: left;

            font-size: 12px;
            color: #43475C;

            i{
              margin-right: 6px;
            }
          }
          .btn-others:disabled{
            color: #aaa;
          }
          .btn-delete{
            border-top: 1px solid #EDEFF2;
          }
          .btn-line{
            margin-top: 10px;
            border-top: 1px solid #EDEFF2;
          }
          .inverted-tri{
            position: absolute;
            width: 10px;
            height: 10px;
            bottom: -8px;;
            left: 50%;
            transform: rotateZ(45deg) translateX(-50%);
            background: #fff;
          }
        }
      }
      .handle-btn-others-active{
        .btn-oth{
          color: #fff;
          background: #127BFF;
          border-color: #127BFF;
        }
      }
    }
  }
  .produ-handle-active{
    height: 140px;
  }

  .produ-status{
    position: absolute;
    top: 0;
    left: 0;
    background: #A5AFBE;
    border-radius: 0 0 10px 0;
    z-index: 3;

    p{
      margin: 0;
      padding: 3px 8px;
      font-size: 12px;
      color: #fff;
    }
  }
  .is-online{
    display: none;
  }

  .blur {
    // filter: url(@images/blur.svg#blur); /* FireFox, Chrome, Opera */

    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);
            filter: blur(10px);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
  }

  .produ-tag {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;

    &:hover {
      z-index: 2;
    }
  }
</style>
